<template>
	<view>
		 <!-- 搜索头部导航 -->
		 <search-menu @clicksearch="clicksearch" title="豫见电商" searchText="搜索商品" :disabled="true"></search-menu>
		 
		 
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 10upx)">
				<view class="cu-item" :class="index==tabCur?'text-green cur fontSize':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					 {{item.cate_name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 10upx)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-green"></text> 
							{{item.cate_name}}
							</view>
					</view>
					
					<view class="list-item-wrapper">
						<view class="item" v-for="(i,index) in item.children" :key="index" @click="clickItem(i)">
							<image :src="i.pic" mode="aspectFit"></image>
							<text>{{i.cate_name}}</text>
						</view>
					 
						
					</view>
		 
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import searchMenu from '../../components/searchMenu/searchMenu.vue'
	export default {
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true
			};
		},
		components:{searchMenu,},
		onLoad() {
	
		//请求数据
			this.list = this.$request.mock.categoryList
			// this.getCategoryData();
		},
		onReady() {
			 
		},
		methods: {
			//get category 分类
			getCategoryData(){
				this.$request.api.goods.getCategory().then(res=>{
					if(res.data.status === 200){
						this.list = res.data.data;
					}
				}).catch(err=>{})
			},
			
			//点击搜索菜单
			clicksearch(e) {
				console.log(e);
				this.$request.msg(e);
			},
			//点击单个商品
			clickItem(goods){
				console.log(goods);
					
				uni.navigateTo({
						url:'../goodslist/goodslist?cid='+goods.id
				})
			 
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
	 
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		},
	}
</script>

<style>
	.VerticalBox{
		/* margin-top: 50px; */
		height: 100vh;
	}
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
	
	.padding-lr{
		padding-left: 14rpx;
		padding-top: 14rpx;
		padding-right:14rpx
	}
	.fontSize{
		font-size: 35rpx;
		font-weight: 800;
	}
	
	
	.list-item-wrapper{
		display: flex;
		background-color: #FFFFFF;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
	}
	.list-item-wrapper .item{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33%;
		padding: 20rpx;
	}
	.list-item-wrapper .item image{
		width: 140rpx;
		height: 140rpx;
	}
	.list-item-wrapper .item text{
		margin-top: 10rpx;
		font-weight: 600;
		font-size: 28rpx;
		 width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: center;
	}
</style>
